<template>
  <div id="outDetailDiv">
    <Breadcrumb content="出库明细" />
    <div class="bodyContent">
      <vxe-form :data="searchForm" class="searchform form-input-m">
        <vxe-form-item title="单据日期[起]">
          <template #default="{ data }">
            <el-date-picker v-model="data.documentDateBegin" :value-format="'YYYY-MM-DD HH:mm:ss'" type="datetime" placeholder="标本日期[起]" :shortcuts="shortcuts" />
          </template>
        </vxe-form-item>
        <vxe-form-item title="单据日期[止]">
          <template #default="{ data }">
            <el-date-picker v-model="data.documentDateEnd" :value-format="'YYYY-MM-DD HH:mm:ss'" type="datetime" placeholder="标本日期[止]" :shortcuts="shortcuts" />
          </template>
        </vxe-form-item>
        <vxe-form-item>
          <vxe-button type="text" class="button-blue" icon="vxe-icon-search" content="查询" :loading="tloading" @click="findInvOrderList"></vxe-button>
        </vxe-form-item>
      </vxe-form>

      <div class="tableBoBox">
        <vxe-table ref="invOrderTableRef" class="mytable-scrollbar supplierTableClazz" border="inner" align="center" height="auto" :data="invOrderList" :loading="tloading" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" resizable show-overflow keep-source>
          <vxe-column type="checkbox" width="30"></vxe-column>
          <vxe-column field="transferNo" title="流转单号" width="200">
            <template #default="{ row }">
              <span>{{ row.transferNo }}</span>
            </template>
          </vxe-column>
          <vxe-column field="transferType" title="流转方式" width="80">
            <template #default="{ row }">
              <span>
                {{ formatTransType(transTypeList, row.transferType) }}
              </span>
            </template>
          </vxe-column>

          <vxe-column field="documentDate" title="单据日期" width="150"> </vxe-column>

          <vxe-column field="reaNo" title="商品编号" width="100"> </vxe-column>
          <vxe-column field="reaNa" title="商品名称" width="100"> </vxe-column>
          <vxe-column field="specModel" title="规格型号" width="100"> </vxe-column>
          <vxe-column field="manuName" title="生产厂家" width="200"> </vxe-column>
          <vxe-column field="amount" title="数量" width="100"> </vxe-column>

        </vxe-table>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import Breadcrumb from '@/components/Breadcrumb.vue';
import moment from 'moment';
import { Splitpanes, Pane } from 'splitpanes';
import { formatDateTime } from '@/utils/common';

import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示框
import { isEmpty } from 'lodash';
let { proxy }: any = getCurrentInstance();

let searchForm = reactive({
  searchValue: '',
  transferNo: '',
  transferType: '',
  transferTypes: '',
  orderStatus: '',
  documentDateBegin: formatDateTime(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 7), 'yyyy-MM-dd 00:00:00'),
  documentDateEnd: formatDateTime(new Date(), 'yyyy-MM-dd 23:59:59')
});
let tloading = ref(false); //刷新加载状态

let invOrderList: any = reactive([]);
let transTypeList: any = reactive([]);
let invOrderStatusList: any = reactive([]);

// 页面加载时更新报告单元/字典
onMounted(async () => {
  getDictItemsList(); //批量获取字典
  await findInvTransTypeList();
  await findInvOrderList();
});
//批量获取字典
async function getDictItemsList() {
  let dictTreeTypeCodes: any = ['invOrderStatus'];

  const codes = dictTreeTypeCodes.join(',');
  const url = '/api/sys/basDictDetail/findDictDetailListByDictCodes';
  const dictTreeTypeItems: any = await proxy.$http.get(url, { params: { code: codes } });

  const iosObj = dictTreeTypeItems.data.find((item: any) => item.code === 'invOrderStatus');
  invOrderStatusList.push(...iosObj.detailDataList);
}
async function findInvTransTypeList() {
  const url = '/inv/transfer/type/findInvTransferTypeList';
  await proxy.$http
    //注意此处的数据条数
    .get(url, { params: { businessType: '02' } })
    .then((res: any) => {
      if (res.status.code === 1) {
        transTypeList.push(...res.data);
      }
    })
    .catch((err: any) => {
      // VxeMessage('获取机构列表失败',VxeNotifyType.error)
    });
}

async function findInvOrderList() {
  tloading.value = true;
  invOrderList.length = 0; //放入数据前清空数据
  const url = '/inv/orderReagent/findInOutStorageDetail';
  await proxy.$http
    //注意此处的数据条数
    .get(url, {
      params: {
        searchValue: searchForm.searchValue,
        businessType: '02',
        documentDateBegin: searchForm.documentDateBegin,
        documentDateEnd: searchForm.documentDateEnd
      }
    })
    .then((res: any) => {
      invOrderList.push(...res.data);

      tloading.value = false;
    })
    .catch((err: any) => {
      tloading.value = false;
      // VxeMessage('获取获取当前字典的规则列表失败',VxeNotifyType.error)
    });
}

function formatTransType(arr: any, value: any) {
  for (const item of arr) {
    if (item.transferCode == value) {
      return item.transferName;
    }
  }
}
</script>

<style lang="scss" scoped>
#outDetailDiv {
  width: 100%;
  height: 100%;

  .bodyContent {
    height: calc(100%);
    // 右侧保存按钮
    .saveBtn {
      //float: right;
      margin: 0px 30px;
    }
    // 附加按钮间距
    .button-blue {
      margin: 5px 0 5px 5px;
    }
    .button-red {
      margin: 5px 0 5px 5px;
    }

    // 机构表格
    :deep(.vxe-table--render-default) {
      height: 100%;
    }
    :deep(.vxe-table--render-wrapper) {
      height: 100%;
      background-color: $base-white;
    }
    .tableBox {
      height: calc(100% - 40px);
    }
    .tableBoBox {
      height: calc(100% - 103px);
    }
    .horizontalLine {
      background-color: $base-white;
    }

    .searchform {
      padding: 10px 0 0 10px;

      :deep(.vxe-form--item) {
        margin-right: 30px;
      }
    }

    .searchform .vxe-input {
      --el-input-width: 120px;
    }

    .searchform .vxe-select {
      --el-select-width: 120px;
    }
    .form-input-m {
      .el-input {
        width: 150px;
      }

      .vxe-input {
        width: 150px !important;
      }
    }
  }
}
</style>